<!DOCTYPE html>
<html>
<head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
        <script>
            L_NO_TOUCH = false;
            L_DISABLE_3D = false;
        </script>
    
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
    
            <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <style>
                #map_d5f3b37a606a64427bf87cf1247bddc8 {
                    position: relative;
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;
                }
                .leaflet-container { font-size: 1rem; }
            </style>
        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/iso8601-js-period@0.2.1/iso8601.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet-timedimension@1.1.1/dist/leaflet.timedimension.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-timedimension@1.1.1/dist/leaflet.timedimension.control.css"/>
</head>
<body>
    
    
            <div class="folium-map" id="map_d5f3b37a606a64427bf87cf1247bddc8" ></div>
        
</body>
<script>
    
    
            var map_d5f3b37a606a64427bf87cf1247bddc8 = L.map(
                "map_d5f3b37a606a64427bf87cf1247bddc8",
                {
                    center: [36.32936576, 117.03904896],
                    crs: L.CRS.EPSG3857,
                    zoom: 13,
                    zoomControl: true,
                    preferCanvas: false,
                }
            );

            

        
    
            var tile_layer_bb16190c98b7f87469c9b5e57c9ef145 = L.tileLayer(
                "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
                {"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 19, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
            );
        
    
            tile_layer_bb16190c98b7f87469c9b5e57c9ef145.addTo(map_d5f3b37a606a64427bf87cf1247bddc8);
        
    
            L.Control.TimeDimensionCustom = L.Control.TimeDimension.extend({
                _getDisplayDateFormat: function(date){
                    var newdate = new moment(date);
                    console.log(newdate)
                    return newdate.format("YYYY-MM-DD HH:mm:ss");
                }
            });
            map_d5f3b37a606a64427bf87cf1247bddc8.timeDimension = L.timeDimension(
                {
                    period: "PT1M",
                }
            );
            var timeDimensionControl = new L.Control.TimeDimensionCustom(
                {"autoPlay": true, "loopButton": true, "maxSpeed": 10, "minSpeed": 0.1, "playerOptions": {"loop": false, "startOver": true, "transitionTime": 200}, "position": "bottomleft", "speedSlider": true, "timeSliderDragUpdate": true}
            );
            map_d5f3b37a606a64427bf87cf1247bddc8.addControl(this.timeDimensionControl);

            var geoJsonLayer = L.geoJson({"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [121.473701, 31.230416]}, "properties": {"time": "2023-10-01T08:00:00", "popup": "\u65f6\u95f4: 2023-10-01 08:00:00<br>\u7ecf\u5ea6: 121.473701<br>\u7eac\u5ea6: 31.230416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [121.673701, 31.430416]}, "properties": {"time": "2023-10-01T08:05:00", "popup": "\u65f6\u95f4: 2023-10-01 08:05:00<br>\u7ecf\u5ea6: 121.673701<br>\u7eac\u5ea6: 31.430416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [121.873701, 31.830416]}, "properties": {"time": "2023-10-01T08:10:00", "popup": "\u65f6\u95f4: 2023-10-01 08:10:00<br>\u7ecf\u5ea6: 121.873701<br>\u7eac\u5ea6: 31.830416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [122.073701, 32.230416]}, "properties": {"time": "2023-10-01T08:15:00", "popup": "\u65f6\u95f4: 2023-10-01 08:15:00<br>\u7ecf\u5ea6: 122.073701<br>\u7eac\u5ea6: 32.230416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [122.273701, 32.730416]}, "properties": {"time": "2023-10-01T08:20:00", "popup": "\u65f6\u95f4: 2023-10-01 08:20:00<br>\u7ecf\u5ea6: 122.273701<br>\u7eac\u5ea6: 32.730416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [122.473701, 33.230416]}, "properties": {"time": "2023-10-01T08:25:00", "popup": "\u65f6\u95f4: 2023-10-01 08:25:00<br>\u7ecf\u5ea6: 122.473701<br>\u7eac\u5ea6: 33.230416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [122.673701, 33.730416]}, "properties": {"time": "2023-10-01T08:30:00", "popup": "\u65f6\u95f4: 2023-10-01 08:30:00<br>\u7ecf\u5ea6: 122.673701<br>\u7eac\u5ea6: 33.730416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [122.873701, 34.230416]}, "properties": {"time": "2023-10-01T08:35:00", "popup": "\u65f6\u95f4: 2023-10-01 08:35:00<br>\u7ecf\u5ea6: 122.873701<br>\u7eac\u5ea6: 34.230416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [123.073701, 34.730416]}, "properties": {"time": "2023-10-01T08:40:00", "popup": "\u65f6\u95f4: 2023-10-01 08:40:00<br>\u7ecf\u5ea6: 123.073701<br>\u7eac\u5ea6: 34.730416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [123.273701, 35.230416]}, "properties": {"time": "2023-10-01T08:45:00", "popup": "\u65f6\u95f4: 2023-10-01 08:45:00<br>\u7ecf\u5ea6: 123.273701<br>\u7eac\u5ea6: 35.230416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [118.473701, 35.730416]}, "properties": {"time": "2023-10-01T08:50:00", "popup": "\u65f6\u95f4: 2023-10-01 08:50:00<br>\u7ecf\u5ea6: 118.473701<br>\u7eac\u5ea6: 35.730416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [117.673701, 36.230416]}, "properties": {"time": "2023-10-01T08:55:00", "popup": "\u65f6\u95f4: 2023-10-01 08:55:00<br>\u7ecf\u5ea6: 117.673701<br>\u7eac\u5ea6: 36.230416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [116.873701, 36.730416]}, "properties": {"time": "2023-10-01T09:00:00", "popup": "\u65f6\u95f4: 2023-10-01 09:00:00<br>\u7ecf\u5ea6: 116.873701<br>\u7eac\u5ea6: 36.730416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [116.073701, 37.230416]}, "properties": {"time": "2023-10-01T09:05:00", "popup": "\u65f6\u95f4: 2023-10-01 09:05:00<br>\u7ecf\u5ea6: 116.073701<br>\u7eac\u5ea6: 37.230416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [115.273701, 37.730416]}, "properties": {"time": "2023-10-01T09:10:00", "popup": "\u65f6\u95f4: 2023-10-01 09:10:00<br>\u7ecf\u5ea6: 115.273701<br>\u7eac\u5ea6: 37.730416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [114.473701, 38.230416]}, "properties": {"time": "2023-10-01T09:15:00", "popup": "\u65f6\u95f4: 2023-10-01 09:15:00<br>\u7ecf\u5ea6: 114.473701<br>\u7eac\u5ea6: 38.230416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [113.673701, 38.730416]}, "properties": {"time": "2023-10-01T09:20:00", "popup": "\u65f6\u95f4: 2023-10-01 09:20:00<br>\u7ecf\u5ea6: 113.673701<br>\u7eac\u5ea6: 38.730416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [112.873701, 39.130416]}, "properties": {"time": "2023-10-01T09:25:00", "popup": "\u65f6\u95f4: 2023-10-01 09:25:00<br>\u7ecf\u5ea6: 112.873701<br>\u7eac\u5ea6: 39.130416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [112.073701, 39.330416]}, "properties": {"time": "2023-10-01T09:30:00", "popup": "\u65f6\u95f4: 2023-10-01 09:30:00<br>\u7ecf\u5ea6: 112.073701<br>\u7eac\u5ea6: 39.330416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [111.273701, 39.530416]}, "properties": {"time": "2023-10-01T09:35:00", "popup": "\u65f6\u95f4: 2023-10-01 09:35:00<br>\u7ecf\u5ea6: 111.273701<br>\u7eac\u5ea6: 39.530416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [110.473701, 39.630416]}, "properties": {"time": "2023-10-01T09:40:00", "popup": "\u65f6\u95f4: 2023-10-01 09:40:00<br>\u7ecf\u5ea6: 110.473701<br>\u7eac\u5ea6: 39.630416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [109.673701, 39.730416]}, "properties": {"time": "2023-10-01T09:45:00", "popup": "\u65f6\u95f4: 2023-10-01 09:45:00<br>\u7ecf\u5ea6: 109.673701<br>\u7eac\u5ea6: 39.730416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [108.873701, 39.830416]}, "properties": {"time": "2023-10-01T09:50:00", "popup": "\u65f6\u95f4: 2023-10-01 09:50:00<br>\u7ecf\u5ea6: 108.873701<br>\u7eac\u5ea6: 39.830416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [108.073701, 39.930416]}, "properties": {"time": "2023-10-01T09:55:00", "popup": "\u65f6\u95f4: 2023-10-01 09:55:00<br>\u7ecf\u5ea6: 108.073701<br>\u7eac\u5ea6: 39.930416", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [116.4074, 39.90416]}, "properties": {"time": "2023-10-01T10:00:00", "popup": "\u65f6\u95f4: 2023-10-01 10:00:00<br>\u7ecf\u5ea6: 116.407400<br>\u7eac\u5ea6: 39.904160", "icon": "circle", "iconstyle": {"fillColor": "#ff0000", "fillOpacity": 0.8, "stroke": false, "radius": 5}}}]}, {
                    pointToLayer: function (feature, latLng) {
                        if (feature.properties.icon == 'marker') {
                            if(feature.properties.iconstyle){
                                return new L.Marker(latLng, {
                                    icon: L.icon(feature.properties.iconstyle)});
                            }
                            //else
                            return new L.Marker(latLng);
                        }
                        if (feature.properties.icon == 'circle') {
                            if (feature.properties.iconstyle) {
                                return new L.circleMarker(latLng, feature.properties.iconstyle)
                                };
                            //else
                            return new L.circleMarker(latLng);
                        }
                        //else

                        return new L.Marker(latLng);
                    },
                    style: function (feature) {
                        return feature.properties.style;
                    },
                    onEachFeature: function(feature, layer) {
                        if (feature.properties.popup) {
                        layer.bindPopup(feature.properties.popup);
                        }
                        if (feature.properties.tooltip) {
                        layer.bindTooltip(feature.properties.tooltip);
                        }
                    }
                })

            var timestamped_geo_json_b02f32dcc556655c86fac5ff2a8645e4 = L.timeDimension.layer.geoJson(
                geoJsonLayer,
                {
                    updateTimeDimension: true,
                    addlastPoint: true,
                    duration: undefined,
                }
            ).addTo(map_d5f3b37a606a64427bf87cf1247bddc8);
        
</script>
</html>